{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Processing Images\n",
    "\n",
    "## Laura's Foot\n",
    "\n",
    "In the following examples, you can click on the canvas to advance the sequence.\n",
    "\n",
    "Other ideas:\n",
    "\n",
    "* http://cs.brynmawr.edu/~dblank/bubo/brain/ - Laura's Brain"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_1\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_1\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_1\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_1\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_1\">\n",
       "  <b>Sketch #1:</b><br/>\n",
       "  <canvas id=\"canvas_1\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_1\">\n",
       "  <button id=\"run_button_1\" onclick=\"startSketch('1');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_1\" onclick=\"pauseSketch('1');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_1\" onclick=\"setupSketch('1');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_1\" onclick=\"drawSketch('1');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #1 state:</b> <span id=\"state_1\">Loading...</span><br/>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = '/* @pjs preload=\"images/00000000.jpg,images/00000001.jpg,images/00000002.jpg,images/00000003.jpg,images/00000004.jpg,images/00000005.jpg,images/00000006.jpg,images/00000007.jpg,images/00000008.jpg,images/00000009.jpg,images/00000010.jpg,images/00000011.jpg,images/00000012.jpg,images/00000013.jpg,images/00000014.jpg,images/00000015.jpg,images/00000016.jpg,images/00000017.jpg,images/00000018.jpg,images/00000019.jpg,images/00000020.jpg,images/00000021.jpg,images/00000022.jpg,images/00000023.jpg,images/00000024.jpg,images/00000025.jpg,images/00000026.jpg,images/00000027.jpg,images/00000028.jpg,images/00000029.jpg,images/00000030.jpg,images/00000031.jpg,images/00000032.jpg,images/00000033.jpg,images/00000034.jpg,images/00000035.jpg,images/00000036.jpg,images/00000037.jpg\"; */\\n\\nPImage[] imgs = new PImage[38];\\nint current = 0;\\n\\nvoid setup() {\\n    for (int i=0; i < imgs.length; i++) {\\n        imgs[i] = loadImage(\"images/\" + nf(i, 8) + \".jpg\");\\n    }\\n    size(imgs[0].width, imgs[0].height);\\n}\\n\\nvoid draw() {\\n}\\n\\nvoid mouseClicked() {\\n    current++;\\n    if (current == imgs.length) {\\n        current = 0;\\n    }\\n    image(imgs[current], 0, 0);\\n}';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_1\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_1\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_1\", cc);\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_1\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_1\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_1\", cc);\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_1\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_1\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_1\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_1\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_1\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_1\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_1\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_1\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_1\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_1\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_1\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_1\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_1\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_1\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_1\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_1\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_1\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_1\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_1\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_1\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_1\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_1\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "/* @pjs preload=\"images/00000000.jpg,images/00000001.jpg,images/00000002.jpg,images/00000003.jpg,images/00000004.jpg,images/00000005.jpg,images/00000006.jpg,images/00000007.jpg,images/00000008.jpg,images/00000009.jpg,images/00000010.jpg,images/00000011.jpg,images/00000012.jpg,images/00000013.jpg,images/00000014.jpg,images/00000015.jpg,images/00000016.jpg,images/00000017.jpg,images/00000018.jpg,images/00000019.jpg,images/00000020.jpg,images/00000021.jpg,images/00000022.jpg,images/00000023.jpg,images/00000024.jpg,images/00000025.jpg,images/00000026.jpg,images/00000027.jpg,images/00000028.jpg,images/00000029.jpg,images/00000030.jpg,images/00000031.jpg,images/00000032.jpg,images/00000033.jpg,images/00000034.jpg,images/00000035.jpg,images/00000036.jpg,images/00000037.jpg\"; */\n",
    "\n",
    "PImage[] imgs = new PImage[38];\n",
    "int current = 0;\n",
    "\n",
    "void setup() {\n",
    "    for (int i=0; i < imgs.length; i++) {\n",
    "        imgs[i] = loadImage(\"images/\" + nf(i, 8) + \".jpg\");\n",
    "    }\n",
    "    size(imgs[0].width, imgs[0].height);\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "}\n",
    "\n",
    "void mouseClicked() {\n",
    "    current++;\n",
    "    if (current == imgs.length) {\n",
    "        current = 0;\n",
    "    }\n",
    "    image(imgs[current], 0, 0);\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_2\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_2\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_2\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_2\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_2\">\n",
       "  <b>Sketch #2:</b><br/>\n",
       "  <canvas id=\"canvas_2\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_2\">\n",
       "  <button id=\"run_button_2\" onclick=\"startSketch('2');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_2\" onclick=\"pauseSketch('2');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_2\" onclick=\"setupSketch('2');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_2\" onclick=\"drawSketch('2');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #2 state:</b> <span id=\"state_2\">Loading...</span><br/>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = '/* @pjs preload=\"images/00000000.jpg,images/00000001.jpg,images/00000002.jpg,images/00000003.jpg,images/00000004.jpg,images/00000005.jpg,images/00000006.jpg,images/00000007.jpg,images/00000008.jpg,images/00000009.jpg,images/00000010.jpg,images/00000011.jpg,images/00000012.jpg,images/00000013.jpg,images/00000014.jpg,images/00000015.jpg,images/00000016.jpg,images/00000017.jpg,images/00000018.jpg,images/00000019.jpg,images/00000020.jpg,images/00000021.jpg,images/00000022.jpg,images/00000023.jpg,images/00000024.jpg,images/00000025.jpg,images/00000026.jpg,images/00000027.jpg,images/00000028.jpg,images/00000029.jpg,images/00000030.jpg,images/00000031.jpg,images/00000032.jpg,images/00000033.jpg,images/00000034.jpg,images/00000035.jpg,images/00000036.jpg,images/00000037.jpg\"; */\\n\\nPImage[] imgs = new PImage[38];\\nint current = 0;\\n\\nvoid setup() {\\n    for (int i=0; i < imgs.length; i++) {\\n        imgs[i] = loadImage(\"images/\" + nf(i, 8) + \".jpg\");\\n    }\\n    size(imgs[0].width, imgs[0].height);\\n}\\n\\nvoid draw() {\\n    image(imgs[current], 0, 0);\\n}\\n\\nvoid mouseClicked() {\\n    imgs[current].loadPixels();\\n    //println(\"gray: \" + red(imgs[current].pixels[int(mouseX + mouseY * imgs[current].width)]));\\n    current++;\\n    if (current == imgs.length) {\\n        current = 0;\\n    }    \\n}\\n\\n';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_2\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_2\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_2\", cc);\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_2\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_2\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_2\", cc);\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_2\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_2\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_2\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_2\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_2\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_2\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_2\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_2\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_2\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_2\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_2\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_2\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_2\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_2\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_2\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_2\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_2\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_2\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_2\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_2\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_2\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_2\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "/* @pjs preload=\"images/00000000.jpg,images/00000001.jpg,images/00000002.jpg,images/00000003.jpg,images/00000004.jpg,images/00000005.jpg,images/00000006.jpg,images/00000007.jpg,images/00000008.jpg,images/00000009.jpg,images/00000010.jpg,images/00000011.jpg,images/00000012.jpg,images/00000013.jpg,images/00000014.jpg,images/00000015.jpg,images/00000016.jpg,images/00000017.jpg,images/00000018.jpg,images/00000019.jpg,images/00000020.jpg,images/00000021.jpg,images/00000022.jpg,images/00000023.jpg,images/00000024.jpg,images/00000025.jpg,images/00000026.jpg,images/00000027.jpg,images/00000028.jpg,images/00000029.jpg,images/00000030.jpg,images/00000031.jpg,images/00000032.jpg,images/00000033.jpg,images/00000034.jpg,images/00000035.jpg,images/00000036.jpg,images/00000037.jpg\"; */\n",
    "\n",
    "PImage[] imgs = new PImage[38];\n",
    "int current = 0;\n",
    "\n",
    "void setup() {\n",
    "    for (int i=0; i < imgs.length; i++) {\n",
    "        imgs[i] = loadImage(\"images/\" + nf(i, 8) + \".jpg\");\n",
    "    }\n",
    "    size(imgs[0].width, imgs[0].height);\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "    image(imgs[current], 0, 0);\n",
    "}\n",
    "\n",
    "void mouseClicked() {\n",
    "    imgs[current].loadPixels();\n",
    "    //println(\"gray: \" + red(imgs[current].pixels[int(mouseX + mouseY * imgs[current].width)]));\n",
    "    current++;\n",
    "    if (current == imgs.length) {\n",
    "        current = 0;\n",
    "    }    \n",
    "}\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_3\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_3\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_3\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_3\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_3\">\n",
       "  <b>Sketch #3:</b><br/>\n",
       "  <canvas id=\"canvas_3\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_3\">\n",
       "  <button id=\"run_button_3\" onclick=\"startSketch('3');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_3\" onclick=\"pauseSketch('3');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_3\" onclick=\"setupSketch('3');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_3\" onclick=\"drawSketch('3');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #3 state:</b> <span id=\"state_3\">Loading...</span><br/>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = '/* @pjs preload=\"images/00000000.jpg,images/00000001.jpg,images/00000002.jpg,images/00000003.jpg,images/00000004.jpg,images/00000005.jpg,images/00000006.jpg,images/00000007.jpg,images/00000008.jpg,images/00000009.jpg,images/00000010.jpg,images/00000011.jpg,images/00000012.jpg,images/00000013.jpg,images/00000014.jpg,images/00000015.jpg,images/00000016.jpg,images/00000017.jpg,images/00000018.jpg,images/00000019.jpg,images/00000020.jpg,images/00000021.jpg,images/00000022.jpg,images/00000023.jpg,images/00000024.jpg,images/00000025.jpg,images/00000026.jpg,images/00000027.jpg,images/00000028.jpg,images/00000029.jpg,images/00000030.jpg,images/00000031.jpg,images/00000032.jpg,images/00000033.jpg,images/00000034.jpg,images/00000035.jpg,images/00000036.jpg,images/00000037.jpg\"; */\\n\\nPImage[] imgs = new PImage[38];\\nint current = 0;\\n\\nvoid setup() {\\n    for (int i=0; i < imgs.length; i++) {\\n        imgs[i] = loadImage(\"images/\" + nf(i, 8) + \".jpg\");\\n    }\\n    size(imgs[0].width, imgs[0].height);\\n}\\n\\nvoid draw() {\\n    image(imgs[current], 0, 0);\\n    current++;\\n    if (current == imgs.length) {\\n        current = 0;\\n    }\\n}\\n';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_3\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_3\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_3\", cc);\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_3\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_3\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_3\", cc);\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_3\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_3\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_3\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_3\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_3\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_3\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_3\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_3\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_3\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_3\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_3\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_3\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_3\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_3\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_3\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_3\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_3\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_3\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_3\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_3\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_3\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_3\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "/* @pjs preload=\"images/00000000.jpg,images/00000001.jpg,images/00000002.jpg,images/00000003.jpg,images/00000004.jpg,images/00000005.jpg,images/00000006.jpg,images/00000007.jpg,images/00000008.jpg,images/00000009.jpg,images/00000010.jpg,images/00000011.jpg,images/00000012.jpg,images/00000013.jpg,images/00000014.jpg,images/00000015.jpg,images/00000016.jpg,images/00000017.jpg,images/00000018.jpg,images/00000019.jpg,images/00000020.jpg,images/00000021.jpg,images/00000022.jpg,images/00000023.jpg,images/00000024.jpg,images/00000025.jpg,images/00000026.jpg,images/00000027.jpg,images/00000028.jpg,images/00000029.jpg,images/00000030.jpg,images/00000031.jpg,images/00000032.jpg,images/00000033.jpg,images/00000034.jpg,images/00000035.jpg,images/00000036.jpg,images/00000037.jpg\"; */\n",
    "\n",
    "PImage[] imgs = new PImage[38];\n",
    "int current = 0;\n",
    "\n",
    "void setup() {\n",
    "    for (int i=0; i < imgs.length; i++) {\n",
    "        imgs[i] = loadImage(\"images/\" + nf(i, 8) + \".jpg\");\n",
    "    }\n",
    "    size(imgs[0].width, imgs[0].height);\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "    image(imgs[current], 0, 0);\n",
    "    current++;\n",
    "    if (current == imgs.length) {\n",
    "        current = 0;\n",
    "    }\n",
    "}\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_4\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_4\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_4\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_4\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_4\">\n",
       "  <b>Sketch #4:</b><br/>\n",
       "  <canvas id=\"canvas_4\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_4\">\n",
       "  <button id=\"run_button_4\" onclick=\"startSketch('4');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_4\" onclick=\"pauseSketch('4');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_4\" onclick=\"setupSketch('4');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_4\" onclick=\"drawSketch('4');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #4 state:</b> <span id=\"state_4\">Loading...</span><br/>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = '/* @pjs preload=\"images/00000000.jpg,images/00000001.jpg,images/00000002.jpg,images/00000003.jpg,images/00000004.jpg,images/00000005.jpg,images/00000006.jpg,images/00000007.jpg,images/00000008.jpg,images/00000009.jpg,images/00000010.jpg,images/00000011.jpg,images/00000012.jpg,images/00000013.jpg,images/00000014.jpg,images/00000015.jpg,images/00000016.jpg,images/00000017.jpg,images/00000018.jpg,images/00000019.jpg,images/00000020.jpg,images/00000021.jpg,images/00000022.jpg,images/00000023.jpg,images/00000024.jpg,images/00000025.jpg,images/00000026.jpg,images/00000027.jpg,images/00000028.jpg,images/00000029.jpg,images/00000030.jpg,images/00000031.jpg,images/00000032.jpg,images/00000033.jpg,images/00000034.jpg,images/00000035.jpg,images/00000036.jpg,images/00000037.jpg\"; */\\n\\nPImage[] imgs = new PImage[38];\\nPImage result;\\nint current = 0;\\n\\nvoid setup() {\\n    for (int i=0; i < imgs.length; i++) {\\n        imgs[i] = loadImage(\"images/\" + nf(i, 8) + \".jpg\");\\n        imgs[i].loadPixels();\\n    }\\n    size(imgs[0].width, imgs[0].height);\\n    result = new PImage(imgs[0].width, imgs[0].height);\\n}\\n\\nvoid draw() {\\n}\\n\\nvoid mouseClicked() {\\n    current++;\\n    if (current == imgs.length) {\\n        current = 0;\\n        result = new PImage(imgs[0].width, imgs[0].height);\\n    }    \\n    result.loadPixels();\\n    for (int i=0; i < current; i++) {\\n        // First find average of white pixels:\\n        int sum = 0;\\n        int count = 0;\\n        for (int x=0; x < imgs[i].width; x++) {\\n            for (int y=0; y < imgs[i].height; y++) {\\n                float c = red(imgs[i].pixels[int(x + y * imgs[i].width)]);\\n                if (c > 10) {\\n                    sum += c;\\n                    count += 1;\\n                }\\n            }\\n        }\\n        float average = sum/float(count);\\n        //println(\"Average \" + i + \": \" + average);\\n        for (int x=0; x < imgs[i].width; x++) {\\n            for (int y=0; y < imgs[i].height; y++) {\\n                float c = red(imgs[i].pixels[int(x + y * imgs[i].width)]);\\n                if (c > average + 70) {\\n                    result.pixels[int(x + y * imgs[i].width)] = color(c, i * 256/37.0, 0); //color(255, i * 255/37.0, 0);\\n                }\\n            }\\n        }\\n    }\\n    result.updatePixels();\\n    image(result, 0, 0);\\n}';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_4\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_4\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_4\", cc);\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_4\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_4\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_4\", cc);\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_4\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_4\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_4\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_4\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_4\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_4\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_4\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_4\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_4\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_4\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_4\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_4\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_4\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_4\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_4\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_4\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_4\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_4\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_4\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_4\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_4\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_4\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "/* @pjs preload=\"images/00000000.jpg,images/00000001.jpg,images/00000002.jpg,images/00000003.jpg,images/00000004.jpg,images/00000005.jpg,images/00000006.jpg,images/00000007.jpg,images/00000008.jpg,images/00000009.jpg,images/00000010.jpg,images/00000011.jpg,images/00000012.jpg,images/00000013.jpg,images/00000014.jpg,images/00000015.jpg,images/00000016.jpg,images/00000017.jpg,images/00000018.jpg,images/00000019.jpg,images/00000020.jpg,images/00000021.jpg,images/00000022.jpg,images/00000023.jpg,images/00000024.jpg,images/00000025.jpg,images/00000026.jpg,images/00000027.jpg,images/00000028.jpg,images/00000029.jpg,images/00000030.jpg,images/00000031.jpg,images/00000032.jpg,images/00000033.jpg,images/00000034.jpg,images/00000035.jpg,images/00000036.jpg,images/00000037.jpg\"; */\n",
    "\n",
    "PImage[] imgs = new PImage[38];\n",
    "PImage result;\n",
    "int current = 0;\n",
    "\n",
    "void setup() {\n",
    "    for (int i=0; i < imgs.length; i++) {\n",
    "        imgs[i] = loadImage(\"images/\" + nf(i, 8) + \".jpg\");\n",
    "        imgs[i].loadPixels();\n",
    "    }\n",
    "    size(imgs[0].width, imgs[0].height);\n",
    "    result = new PImage(imgs[0].width, imgs[0].height);\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "}\n",
    "\n",
    "void mouseClicked() {\n",
    "    current++;\n",
    "    if (current == imgs.length) {\n",
    "        current = 0;\n",
    "        result = new PImage(imgs[0].width, imgs[0].height);\n",
    "    }    \n",
    "    result.loadPixels();\n",
    "    for (int i=0; i < current; i++) {\n",
    "        // First find average of white pixels:\n",
    "        int sum = 0;\n",
    "        int count = 0;\n",
    "        for (int x=0; x < imgs[i].width; x++) {\n",
    "            for (int y=0; y < imgs[i].height; y++) {\n",
    "                float c = red(imgs[i].pixels[int(x + y * imgs[i].width)]);\n",
    "                if (c > 10) {\n",
    "                    sum += c;\n",
    "                    count += 1;\n",
    "                }\n",
    "            }\n",
    "        }\n",
    "        float average = sum/float(count);\n",
    "        //println(\"Average \" + i + \": \" + average);\n",
    "        for (int x=0; x < imgs[i].width; x++) {\n",
    "            for (int y=0; y < imgs[i].height; y++) {\n",
    "                float c = red(imgs[i].pixels[int(x + y * imgs[i].width)]);\n",
    "                if (c > average + 70) {\n",
    "                    result.pixels[int(x + y * imgs[i].width)] = \n",
    "                        color(c, i * 256/37.0, 0); \n",
    "                }\n",
    "            }\n",
    "        }\n",
    "    }\n",
    "    result.updatePixels();\n",
    "    image(result, 0, 0);\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Calysto Processing",
   "language": "java",
   "name": "calysto_processing"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "text/x-java",
    "version": 2
   },
   "file_extension": ".java",
   "mimetype": "text/x-java",
   "name": "java"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}